<template>
	<view>
		<u-toast ref="uToast" />
		<view class="checkbox">
			<u-subsection 
				:list="list" 
				:current="current" 
				mode="subsection"
				activeColor="#007AFF"
				@change="sectionChange"
				fontSize="17"
				></u-subsection>
		</view>
		
		<view class="money">
			<view class="money-column">
				<view class="left-icon">
					<u-icon name="/static/rmb.png" size="40" color="#303133"></u-icon>
				</view>
				<view class="right-input">
					<input class="aaa" placeholder="0.00" type="digit" placeholder-class="bbb" v-model="input_money"/>
				</view>
			</view>
		</view>
		
		<view class="drivider">
			<u-divider lineColor="#82848a"></u-divider>
		</view>
		
		<view class="date-input">
			<view class="left-text">
				<text v-if="current == 0">借给谁:</text>
				<text v-else>向谁借:</text>
			</view>
			<view class="right-textarea">
				<input class="textarea" placeholder="点击输入" type="text" v-model="borrow_person" maxlength="10"/>
			</view>
		</view>
		
		<view class="date-input">
			<view class="left-text">
				<text>账户:</text>
			</view>
			<view class="right-textarea">
				<picker mode="selector"  :range="account_list" :value="borrow_account" @change="getAccount" style="font-size: 30rpx;">
					<view>
						<text style="font-size: 40rpx; color: #606266;">{{borrow_account}}</text>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="date-input">
			<view class="left-text">
				<text>日期:</text>
			</view>
			<view class="right-textarea">
				<picker mode="date" fields="day" :value="date" @change="bindDateChange" style="font-size: 30rpx;">
					<view>
						<text style="font-size: 40rpx; color: #606266;">{{date}}</text>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="date-input">
			<view class="left-text">
				<text>备注:</text>
			</view>
			<view class="right-textarea">
				<input class="textarea" placeholder="备注" type="text" v-model="remarks" maxlength="20"/>
			</view>
		</view>
		
		<view class="button">
			<view class="submit-button">
				<u-button type="primary" icon="edit-pen" text="保存" @click="saveBorrow()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list: [{"value": 0,"name": "借出"	},{"value": 1,"name": "借入"}],
				input_money: '',
				borrow_person: "",
				date: this.getCurrentMonth(),
				borrow_account: "请选择",
				remarks: "",
				account_list: [],
			}
		},
		onLoad() {
			this.getUserAccount()
		},
		methods: {
			sectionChange(index){
				this.current = index;
			},
			bindDateChange: function(e) {
			    this.date = e.target.value
			},
			getCurrentMonth () {
				const date = new Date()
			    let year = date.getFullYear()
			    let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				let day = date.getDate();
				day = day > 9 ? day : '0' + day
				return `${year}-${month}-${day}`
			},
			getUserAccount (){
				let userId = uni.getStorageSync('userId')
				let params = {
					"userId": userId
				}
				const _this = this
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						  'token': uni.getStorageSync('token')
					},
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/account/useraccount",
					method: 'POST',
					data: params,
					success(res) {
						_this.account_list = res.data.data
					}
				})
			},
			getAccount: function(e) {
				this.borrow_account = this.account_list[e.target.value]
			},
			saveBorrow() {
				//昵称校验
				var nameReg1 = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]")
				//校验空格
				var replyCheck = this.borrow_person.replace(/\s*/g, "");
				console.log(this.borrow_person.length)
				if (this.input_money == null || this.input_money == 0){
					this.$refs.uToast.show({
						type: 'error',
						title: '金额有误',
						message: "输入金额有误",
					})
					return
				}else if(this.borrow_person.length == 0){
					this.$refs.uToast.show({
						type: 'error',
						title: '名称有误',
						message: "输入对方名称",
					})
					returns
				}else if(replyCheck.length == 0 || nameReg1.test(this.borrow_person)){
					this.$refs.uToast.show({
						type: 'error',
						title: '名称有误',
						message: "不能含有特殊字符或纯空格",
					})
					return
				}else if(this.borrow_account == "请选择"){
					this.$refs.uToast.show({
						type: 'error',
						title: '账户有误',
						message: "选择借款账户",
					})
					return
				}
				let userId = uni.getStorageSync('userId')
				const date = new Date()
				let h = date.getHours()
				let m = date.getMinutes()
				let s = date.getSeconds()
				let accountTime = `${h}:${m}:${s}`
				let accountName = this.borrow_account
				let params = {
					"userId": userId,
					"person": this.borrow_person,
					"state": this.current^1,
					"borrowMoney": this.input_money,
					"remarks": this.remarks,
					"borrowDate": this.date,
					"borrowTime": accountTime
				}
				const _this = this
				uni.request({
					header: {
						  'Content-Type': 'application/json',
						  'token': uni.getStorageSync('token')
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/borrow/addborrow?accountName="+accountName,
					method: 'POST',
					data: params,
					success(res) {
						_this.$refs.uToast.show({
							type: 'success',
							title: '添加成功',
							message: "添加成功",
							duration: 700,
							complete() {
								uni.switchTab({
									url: '/pages/account/account',
									success: (res) => {
										let page = getCurrentPages().pop();
										if (page == undefined || page == null) return;
										page.onLoad();
									}
									
								})
							},
						})
					}
				})
			}
		}
	}
</script>

<style>
	.checkbox{
		width: 300rpx;
		margin-top: 100rpx;
		margin-left: 30rpx;
	}
	
	.money {
		margin-top: 40rpx;
		margin-left: 30rpx;
	}
	.money-column {
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
	}
	.left-icon{
		width: 100rpx;
	}
	.right-input{
		width: 550rpx;
		height: 90rpx;
	}
	.aaa{
		height: 80rpx; 
		min-height: 60rpx;
		font-size: 80rpx;
	}
	.bbb{
		height: 80rpx;
		min-height: 60rpx;
		font-size: 80rpx;
	}
	
	.drivider{
		height: 20rpx;
		background-color: #c8c9cc;
	}
	
	.date-input{
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}
	.left-text{
		width: 200rpx;
		font-size: 40rpx;
		color: #303133;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 30rpx;
	}
	.right-textarea{
		width: 450rpx;
		font-size: 40rpx;
		display: flex;
		align-items: center;
	}
	
	.button{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
	}
	.submit-button{
		width: 400rpx;
		height: 100rpx;
		font-size: 40rpx;
	}
</style>
